<template>
  <div class="term-list">
    <nav-header>
      <template slot="menuBefore">
        <li><router-link to="/affairs/attend/attendance-list" tag="a">考勤报表</router-link></li>
        <li class="gap">&gt;</li>
      </template>
      <li>考勤详情</li>
    </nav-header>
    <div class="zh-table">
      <div class="zh-table-contents">
        <div class="current-year">课堂信息</div>
        <el-table :data="currentListData" border max-height="600" style="width: 100%">
          <el-table-column prop="course_time" label="上课时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="subject_name" label="课堂科目" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="class_name" label="上课班级" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="teacher_name" label="授课老师" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="all_num" label="应到人数" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="all_reality_num" label="实到人数" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="late_num" label="迟到人数" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="leave_num" label="请假人数" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="early_num" label="早退人数" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="lack_num" label="缺勤人数" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div class="non-start-year">
          <div>考勤名单</div>
        </div>
        <el-table :data="listData" border max-height="600" style="width: 100%">
          <el-table-column type="index" :index="typeIndex" label="序号" align="center" show-overflow-tooltip width="50">
          </el-table-column>
          <el-table-column prop="attend_time" label="打卡时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="class_name" label="上课班级" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="user_name" label="姓名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="attend_status" label="考勤状态" align="center" show-overflow-tooltip>
            <template slot-scope="scope">

                <div style="position: relative;padding: 5px 0;">
                <span v-if="scope.row.attend_status == '缺勤' || scope.row.attend_status == '迟到' ||
          scope.row.attend_status == '早退'" style="color: #C42E5F;">{{
          scope.row.attend_status }}</span>
              <span v-else-if="scope.row.attend_status == '请假'" style="color: #F18E2A;">{{
          scope.row.attend_status }}</span>
              <span v-else>{{ scope.row.attend_status }}</span>
            </div>

              <div class="appeal_tag" v-if="scope.row.is_appeal===2">
                <span  style="color: #fff;font-size: 12px;">已申诉</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column prop="face_path" label="人脸截图" align="center" show-overflow-tooltip>
            <template slot-scope="scope">

              <img v-if="scope.row.face_path" :src="BASE_URL+'/' + scope.row.face_path" @click="openViewImg(scope.row)"
                style="width: 80px;height: 45px;"></img>
            </template>
          </el-table-column>
          <el-table-column prop="5" label="操作" align="center" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_appeal == 1" @click="appeal(scope.row)" type="text">申诉</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination" v-show="total_number > 10">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size"
            layout="total, sizes, prev, pager, next, jumper" :total="total_number">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="人脸截图" :visible.sync="dialogVisible" width="550px">
      <div style="padding-bottom: 30px;">
        <el-image :src="BASE_URL+'/' + viewImgUrl" alt="" style="width: 100%;height: 100%;margin: auto;"  :preview-src-list="[BASE_URL+'/' + viewImgUrl]"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total_number: 0,
      listData: [
        // {
        //   attend_time: '2024-1-29 9:01:12',
        //   class_name: "高二（1）班",                //类型：String  必有字段  备注：上课班级
        //   user_name: "车娜",                //类型：String  必有字段  备注：学生名
        //   attend_status: "到勤",                //类型：String  必有字段  备注：格式化考勤状态
        //   face_path: "mock",                //类型：String  必有字段  备注：人脸截图路径
        //   is_appeal: 0
        // }, {
        //   attend_time: '2024-1-29 9:01:12',
        //   class_name: "高二（1）班",                //类型：String  必有字段  备注：上课班级
        //   user_name: "车娜",                //类型：String  必有字段  备注：学生名
        //   attend_status: "请假",                //类型：String  必有字段  备注：格式化考勤状态
        //   face_path: "",                //类型：String  必有字段  备注：人脸截图路径
        //   is_appeal: 1
        // },
        // {
        //   attend_time: '2024-1-29 9:01:12',
        //   class_name: "高二（1）班",                //类型：String  必有字段  备注：上课班级
        //   user_name: "车娜",                //类型：String  必有字段  备注：学生名
        //   attend_status: "迟到",                //类型：String  必有字段  备注：格式化考勤状态
        //   face_path: "http://172.16.93.3:8082/static/image/management/affairs.svg",                //类型：String  必有字段  备注：人脸截图路径
        //   is_appeal: 2
        // },
        // {
        //   attend_time: '2024-1-29 9:01:12',
        //   class_name: "高二（1）班",                //类型：String  必有字段  备注：上课班级
        //   user_name: "车娜",                //类型：String  必有字段  备注：学生名
        //   attend_status: "早退",                //类型：String  必有字段  备注：格式化考勤状态
        //   face_path: "",                //类型：String  必有字段  备注：人脸截图路径
        //   is_appeal: 2
        // },
        // {
        //   attend_time: '2024-1-29 9:01:12',
        //   class_name: "高二（1）班",                //类型：String  必有字段  备注：上课班级
        //   user_name: "车娜",                //类型：String  必有字段  备注：学生名
        //   attend_status: "缺勤",                //类型：String  必有字段  备注：格式化考勤状态
        //   face_path: "",                //类型：String  必有字段  备注：人脸截图路径
        //   is_appeal: 2
        // }
      ],
      currentListData: [],
      loading: {
        status: false,
        txt: "获取数据...",
      },
      listParam: {
        page_index: 1,
        page_size: 10,
      },
      dialogVisible: false,
      viewImgUrl: "",
    };
  },
  created() {
    this.getAttendList();

    this.getAttendUserList();
  },
  methods: {
    // 获取单个考勤信息
    getAttendList() {
      let success = (data) => {
        this.currentListData = data.data.data;
      };
      let fail = (data) => {
        this.$message.error(data.msg);
      };
      this.$ajax.get("api/ainew/attendList", {
        params: { attend_id: this.$route.params.id },
        func: { success: success, fail: fail },
      });
    },
    // 获取考勤名单
    getAttendUserList() {
      let success = (data) => {
        this.listData = data.data.data;
        this.total_number = data.data.data_sum;
      };
      let fail = (data) => {
        this.$message.error(data.msg);
      };

      this.$ajax.get("api/ainew/attendUserList", {
        params: { ...this.listParam, attend_id: this.$route.params.id },
        func: { success: success, fail: fail },
      });
    },
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getAttendUserList();
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getAttendUserList();
    },
    // 索引
    typeIndex(index) {
      return (
        index + (this.listParam.page_index - 1) * this.listParam.page_size + 1
      );
    },
    // 申诉
    appeal(row) {
      let params = {
        attend_info_id: row.id,
      };
      this.$confirm(
        "确认后，当前考勤状态更改为“到勤”。此操作将影响考勤信息，请谨慎对待",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let success = (data) => {
          this.$message.success("申诉成功");
          this.getAttendList();
          this.getAttendUserList();
        };
        let fail = (data) => {
          this.$message.error(data.msg);
        };
        this.$ajax.put("api/ainew/changeAttendStudent", params, {
          func: { success: success, fail: fail },
        });
      });
    },
    openViewImg(row) {
      this.dialogVisible = true;
      this.viewImgUrl = row.face_path;
    },
  },
};
</script>
<style lang="scss">
.term-list {
  .zh-table-contents {
    margin-top: 0;
  }

  .current-year {
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
  }

  .non-start-year {
    display: flex;
    justify-content: space-between;
    margin-top: 45px;
    padding-bottom: 20px;

    > div:first-child {
      font-size: 18px;
      font-weight: bold;
    }

    > div:last-child {
    }
  }

  .year-title {
    > label {
      font-size: 18px;
      font-weight: bold;
    }

    > div {
      width: 220px;
    }
  }

  .edit-semester-title {
    margin-bottom: 5px;

    > label {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .appeal_tag {
    padding: 2px 8px;
    background-color: #c42e5f;
    border-radius: 10px;
    margin-left: 10px;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
  }
}
</style>
